<template>
    <div class="main-header">
        <el-header>
            <el-menu
                 :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 active-text-color="#409eff"
                 router
            >
                <div class="logo" style="display: flex;">
                    <router-link to="/">
                        <img src="@/assets/imgs/logo.png" alt/>
                    </router-link>
    
                    <el-menu-item class="main-menu-header top-header" selected index="/">首页</el-menu-item>
                    <el-menu-item class="main-menu-header top-header" index="/books">全部商品</el-menu-item>
                    <el-menu-item class="main-menu-header top-header" >关于我们</el-menu-item>
                </div>
            </el-menu>
        </el-header>
    </div>
</template>

<script>
export default {
    name: "Main-Header",
    props: {
        activeIndex: String, // 头部导航栏选中的标签
    }
}
</script>

<style scoped>

.el-header {
    padding: 0;
}

.main-header {
    margin: 0 10% 0 10%;
    height: 60px;
}


/* 顶栏容器CSS */
.el-menu {
    max-width: 1225px;
    margin: 0 auto;
}

.el-header .el-menu {
    max-width: 1225px;
    margin: 0 auto;
}

.logo {
    height: 60px;
    width: 189px;
    float: left;
    margin-right: 60px;
}

/* 顶栏容器CSS END */
</style>
